<template>
  <div>
<!-- 查询 -->
    <el-form inline :model="teacherQuery" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="teacherQuery.name" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="teacherQuery.level" placeholder="活动区域">
          <el-option label="高级讲师" value="1"></el-option>
          <el-option label="首席讲师" value="2"></el-option>
        </el-select>
      </el-form-item>
       <el-form-item>
          <el-date-picker
                v-model="teacherQuery.begin"
                type="datetime"
                placeholder="选择开始时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                align="right">
              </el-date-picker>
        </el-form-item>

        <el-form-item>
           <el-date-picker
                 v-model="teacherQuery.end"
                 type="datetime"
                 value-format="yyyy-MM-dd HH:mm:ss"
                 placeholder="选择结束时间"
                 align="right">
               </el-date-picker>
         </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="pageTeacherConditions()">查询</el-button>
        <el-button type="primary" @click="onempty()">清空</el-button>
      </el-form-item>
    </el-form>



<!-- list -->
      <el-table
          :data="teacherList"
          border
          height="600px"
          style="width: 100%">

          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="avatar"
            align="center"
            label="头像"
            width="150"
            >
            <template slot-scope="scope">
                <img :src="scope.row.avatar" width="100"  height="100"/>
            </template>
          </el-table-column>

          <el-table-column
            prop="name"
            align="center"
            label="姓名"
            width="150"
            >
          </el-table-column>
          <el-table-column
            label="头衔"
            align="center"
            width="120"
           >
            <template slot-scope="scope">
                {{scope.row.level==1?"高级讲师":"首席讲师"}}
            </template>
          </el-table-column>
          <el-table-column
            prop="career"
            label="资历"
            width="120"
            align="center"
           >
          </el-table-column>
          <el-table-column
            prop="gmtCreate"
            label="时间"
            width="200"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="intro"
            label="简介 "
            align="center"
            style="width: 20%">
          </el-table-column>


           <el-table-column label="操作" align="center" >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="teacherModify(scope.row)">编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="teacherDelete(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
        </el-table>


        <el-pagination
          align="center"
          background
          :page-size="limit"
          :total="total"
          layout="total, prev, pager, next"


          @current-change="pageTeacherConditions"
          >
        </el-pagination>
  </div>
</template>

<script>
  import {teacherDel,pageTeacherCondition} from '@/api/teacher/teacher.js'
  export default {
      data(){
        return {
          teacherList:[],
          page:0,//当前页
          limit:6 ,//截至页
          total:0,//总共
          teacherQuery:{}
        }
      },
      mounted() {
        this.pageTeacherConditions();
      },
      methods:{
        //查询和分页
         pageTeacherConditions(page = 1){
           this.page = page;
            pageTeacherCondition(this.page,this.limit,this.teacherQuery).then(res=>{
                this.total=res.data.total
                this.teacherList=res.data.row
                //console.log(this.teacherList)
            })
         },
         //清空搜索
         onempty(){
           this.teacherQuery={};
           this.pageTeacherConditions();
         },
         /* 删除讲师 */
         teacherDelete(id){

           if(!window.confirm(`你确定要${id}删除吗？`)){return}
            teacherDel(id).then(res=>{
                this.$message({
                   message: '恭喜你，这是一条成功消息',
                   type: 'success'
                 });
                this.pageTeacherConditions();
            })

         },
         //修改讲师
         teacherModify(data){
           this.$router.push({
             path:'/teacher/tree',
             query:data
           })
         }
      },
      computed:{

      }
  }
</script>

<style scoped lang="scss">
  .demo-form-inline{
    margin-top: 10px;
    padding-left: 10px;
  }
</style>
